<ion-view view-title="推荐" hide-back-button="true">
    <ion-nav-buttons side="left">
        <button class="button button-icon ion-navicon" menu-toggle></button>
    </ion-nav-buttons>
    <style>
        .recommendCard{height: 300px;}
        .recommendCard-top{height: 250px; background: url("images/londing.jpg"); background-size: cover;}
        .recommendCard-bottom{height: 50px; background: #232323;}
        .recommendCard-left{float: left; height: 250px;}
        .recommendCard-right{width: 125px; float: right;}
        .recommendCard-right-top{height: 125px; background: #b5d592; position: relative;}
        .recommendCard-right-bottom{height: 125px; background: #b2b2b2; position: relative;}
        .recommendCard-bottom p{color: white; font-size: 13px; padding: 0 10px; line-height: 25px;}
        .recommend-content{background: url("images/bg.jpg");}
        .recommendSaber{width: 100%;}
    </style>
    <ion-content on-scroll="changeScale()" class="recommend-content">
        <ion-slide-box does-continue="true" auto-play="true" slide-interval="3000" show-pager="true" pager-click="true">
            <ion-slide>
                <img src="images/slide001.jpg" width="100%">
            </ion-slide>
            <ion-slide>
                <img src="images/slide002.jpg" width="100%">
            </ion-slide>
            <ion-slide>
                <img src="images/slide003.jpg" width="100%">
            </ion-slide>
            <ion-slide>
                <img src="images/slide004.jpg" width="100%">
            </ion-slide>
            <ion-slide>
                <img src="images/slide005.jpg" width="100%">
            </ion-slide>
        </ion-slide-box>
        <div class="card recommendCard" ng-click="openModal()" ng-repeat="x in allRecommend">
            <div class="recommendCard-top">
                <div class="recommendCard-left" style="background: url('{{x.recommendCardLeft}}');background-size: cover;"></div>
                <div class="recommendCard-right">
                    <div class="recommendCard-right-top"><img src="{{x.recommendCardRightTop}}" width="100%" height="100%"></div>
                    <div class="recommendCard-right-bottom"><img src="{{x.recommendCardRightBottom}}" width="100%" height="100%"></div>
                </div>
            </div>
            <div class="recommendCard-bottom"><p>推荐理由：{{x.message}}。</p></div>
        </div>
        <ion-infinite-scroll on-infinite="getRecommend()" ng-if="total>page" immediate-check="false"></ion-infinite-scroll>
    </ion-content>
    <script id="recommend-modal.html" type="text/ng-template">
        <!--需要将modal的内容放在一个ionModalView>元素内-->
        <ion-modal-view>
            <style>
                .lazy{background: url("images/lang.jpg"); background-size: cover;}
            </style>
            <ion-header-bar class="bar-dark">
                <button class="button button-clear" ng-click="closeModal()">返回</button>
                <h1 class="title">King Arthur</h1>
            </ion-header-bar>
            <ion-content class="lazy">
                <div class="list">
                    <div class="item recommendSaber"><img src="images/saber.jpeg" width="100%"></div>
                    <div class="item">天佑吾王！！！</div>
                    <div class="item">All Hail The Britannia！！！</div>
                    <div class="item">All Hail The King！！！</div>
                    <div class="item">赞美上帝那个SB！！！</div>
                    <div class="item">Where's Round！！！</div>
                </div>
            </ion-content>
        </ion-modal-view>
    </script>

</ion-view>